<template>
  <v-container>
    <h1 class="display-1">{{$t("message.tagsearch")}}</h1>
    <v-divider></v-divider>
    <v-chip-group v-model="tagselected" multiple column active-class="primary--text">
      <v-chip filter v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
    </v-chip-group>
    <v-divider></v-divider>
    <v-row align="start" justify="center" no-gutters>
      <v-card class="ma-2" v-for="card1 in cards" :key="card1" flex>
        <v-lazy>
          <v-hover v-slot:default="{ hover }">
            <v-card :elevation="hover ? 15 : 2" id="card" max-width="300px">
              <v-hover v-slot:default="{ hover }">
                <v-img class="white--text" height="200px" :src="card1.pic">
                  <v-expand-transition>
                    <div
                      v-if="hover"
                      class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal white--text title"
                      style="height: 100%;"
                    >
                      <p class="pa-4">{{card1.text}}</p>
                    </div>
                  </v-expand-transition>
                  <template v-slot:placeholder>
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-progress-circular indeterminate color="primary"></v-progress-circular>
                    </v-row>
                  </template>
                </v-img>
              </v-hover>
              <v-card-text class="title pt-4" style="position: relative;">
                <router-link :to="{name:'group',query:{gid:card1.gid,index:1}}">
                  <v-btn absolute color="primary" class="white--text" fab large right top>
                    <v-icon>mdi-play</v-icon>
                  </v-btn>
                </router-link>
                <p class="text-truncate">{{card1.name}}</p>
              </v-card-text>
              <v-card-actions>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-icon v-on="on">mdi-play</v-icon>
                  </template>
                  <span>播放量</span>
                </v-tooltip>
                <v-text>{{card1.played}}</v-text>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-icon class="ml-4" v-on="on">mdi-star-face</v-icon>
                  </template>
                  <span>收藏</span>
                </v-tooltip>
                <v-text class="ml-2">{{card1.favor}}</v-text>
                <v-spacer></v-spacer>
              </v-card-actions>
            </v-card>
          </v-hover>
        </v-lazy>
      </v-card>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    tagselected: [],
    tags: [
      "中医学",
      "医学影像学",
      "生物化学",
      "药理学",
      "微生物学",
      "医学免疫学",
      "空间医学",
      "舌诊",
      "中西医结合",
      "儿科",
      "方剂学",
      "智能中医",
      "妇产科",
      "胎儿医学",
      "超声",
      "骨骼",
      "病理生理学",
      "口腔医学",
      "药膳",
      "护理学",
      "解剖学",
      "针灸",
      "推拿",
      "诊断学",
      "康复医学",
      "生理学",
      "血液学",
      "预防医学",
      "经脉医学",
      "医学养生",
      "脊骨神经医学",
      "基础医学"
    ],
    cards: []
  }),
  methods: {
    Jsonfy() {
      var arrays = new Array();
      for (var i = 0; i < this.tagselected.length; i++) {
        arrays.push(this.tags[this.tagselected[i]]);
      }
      var output = JSON.stringify(arrays);
      //console.log(output);
      return output;
    },
    showall() {
      this.$axios({
        method: "get",
        url: "http://47.100.35.226/php/showallvideos.php"
      }).then(response => {
          var flag=0;
          var resualt=[];
            var jo=[];
            jo=JSON.parse(this.Jsonfy());
            //console.log(this.jsonisEmpty(Response.data));
            console.log(jo);
            // if(this.isEmptyObject(jo)){
            //     resualt=response.data;
            //     console.log("空");
            // }else{
            for(var i=0;i<response.data.length;i++){
                var arr=[];
                arr=JSON.parse(response.data[i].tag);
                //console.log(arr);
                for(var j=0;j<arr.length;j++){
                    for(var k=0;k<jo.length;k++){
                        console.log(jo[k],' ',arr[j]);
                        if(jo[k]==arr[j]){
                            flag++;
                        }
                    }
                    
                }
                console.log(flag);
                    if(flag==jo.length){
                        var row={};
                        row.gid=response.data[i].gid;
                        row.name=response.data[i].name;
                        row.played=response.data[i].played;
                        row.pic=response.data[i].pic;
                        row.favor=response.data[i].favor;
                        row.text=response.data[i].text;
                        resualt.push(row);
                        console.log(resualt);
                        
                    }
                    flag=0;
            }
            // }
            this.cards=resualt;
      });
    },
     isEmptyObject(obj){  
  
     for(var key in obj){  
          break;  return false  
     };  
     return true  
},
  },

  created() {
    this.showall();
  },
  watch:{
      tagselected:function(){
          this.cards=[];
          this.showall();
      }
  }
};
</script>

<style>
</style>